import {designPage, reactive} from "plain-design-composition";
import data from '../../../data/data-1.json';
import {deepcopy} from "plain-utils/object/deepcopy";
import {DemoRow} from "../../Demo/DemoRow";
import {ColorPicker, DatePicker, Form, FormItem, Input, InputNumber, Plc, PlcExpand, PlcGroup, PlcIndex, Table} from "../../../../packages";


export const demoExpand = designPage(() => {

  const state = reactive({
    data,
  });

  const summaryData = deepcopy(data.slice(0, 2));

  return () => (
    <DemoRow title={'展开行'}>
      <Table
        data={state.data}
        summaryData={summaryData}
        virtual
        showRows={10}
      >
        <PlcIndex/>
        <PlcExpand
          fixedWidth
          v-slots={{
            expand: ({ row }) => {
              return (
                <div style={{ padding: '12px' }}>
                  <Form column={1} disabled key={row.id}>
                    <FormItem label={'普通文本'}>{row.name}</FormItem>
                    <FormItem label={'输入框'}><Input disabled={false} v-model={row.name}/></FormItem>
                    <FormItem label={'数字'}><InputNumber v-model={row.size}/></FormItem>
                    <FormItem label={'日期'}><DatePicker v-model={row.date}/></FormItem>
                    <FormItem label={'颜色'}><ColorPicker v-model={row.color}/></FormItem>
                  </Form>
                </div>
              );
            }
          }}
        />
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'大小'} field={'size'}/>
        <PlcGroup title={'地址'} fixed={'left'}>
          <Plc field="date" title="日期"/>
          <Plc field="color" title="颜色"/>
        </PlcGroup>
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'评分'} field={'star'}/>
        <Plc title={'地址'} field={'addr'}/>

        <Plc title={'名称'} field={'name'} fixed="right"/>
        <PlcGroup title={'站点'} fixed={'right'}>
          <Plc field={'url'} title={'链接'}/>
          <Plc field={'domain'} title={'域名'}/>
        </PlcGroup>

        <Plc title="协议" field="protocol"/>
        <Plc title="邮箱" field="email"/>
        <Plc title="ip" field="ip"/>
      </Table>
    </DemoRow>
  );
});


export const demoExpandVirtualCOlumn = designPage(() => {

  const state = reactive({
    data,
  });

  const summaryData = deepcopy(data.slice(0, 2));

  return () => (
    <DemoRow title={'虚拟列'}>
      <Table
        data={state.data}
        summaryData={summaryData}
        virtual
        showRows={10}
        virtualColumn
      >
        <PlcIndex/>
        <PlcExpand
          toggleOnClickRow
          fixedWidth
          v-slots={{
            expand: ({ row }) => {
              return (
                <div style={{ padding: '12px' }}>
                  <Form column={1} disabled key={row.id}>
                    <FormItem label={'普通文本'}>{row.name}</FormItem>
                    <FormItem label={'输入框'}><Input disabled={false} v-model={row.name}/></FormItem>
                    <FormItem label={'数字'}><InputNumber v-model={row.size}/></FormItem>
                    <FormItem label={'日期'}><DatePicker v-model={row.date}/></FormItem>
                    <FormItem label={'颜色'}><ColorPicker v-model={row.color}/></FormItem>
                  </Form>
                </div>
              );
            }
          }}
        />
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'大小'} field={'size'}/>
        <PlcGroup title={'地址'} fixed={'left'}>
          <Plc field="date" title="日期"/>
          <Plc field="color" title="颜色"/>
        </PlcGroup>
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'评分'} field={'star'}/>
        <Plc title={'地址'} field={'addr'}/>

        <Plc title={'名称'} field={'name'} fixed="right"/>
        <PlcGroup title={'站点'} fixed={'right'}>
          <Plc field={'url'} title={'链接'}/>
          <Plc field={'domain'} title={'域名'}/>
        </PlcGroup>

        <Plc title="协议" field="protocol"/>
        <Plc title="邮箱" field="email"/>
        <Plc title="ip" field="ip"/>

        <Plc field={'url'} title={'链接'}/>
        <Plc field={'domain'} title={'域名'}/>
        <Plc title="协议" field="protocol"/>
        <Plc title="邮箱" field="email"/>
        <Plc title="ip" field="ip"/>
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'评分'} field={'star'}/>
        <Plc title={'地址'} field={'addr'}/>

        <Plc field={'url'} title={'链接'}/>
        <Plc field={'domain'} title={'域名'}/>
        <Plc title="协议" field="protocol"/>
        <Plc title="邮箱" field="email"/>
        <Plc title="ip" field="ip"/>
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'评分'} field={'star'}/>
        <Plc title={'地址'} field={'addr'}/>

        <Plc field={'url'} title={'链接'}/>
        <Plc field={'domain'} title={'域名'}/>
        <Plc title="协议" field="protocol"/>
        <Plc title="邮箱" field="email"/>
        <Plc title="ip" field="ip"/>
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'评分'} field={'star'}/>
        <Plc title={'地址'} field={'addr'}/>

        <Plc field={'url'} title={'链接'}/>
        <Plc field={'domain'} title={'域名'}/>
        <Plc title="协议" field="protocol"/>
        <Plc title="邮箱" field="email"/>
        <Plc title="ip" field="ip"/>
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'评分'} field={'star'}/>
        <Plc title={'地址'} field={'addr'}/>

        <Plc field={'url'} title={'链接'}/>
        <Plc field={'domain'} title={'域名'}/>
        <Plc title="协议" field="protocol"/>
        <Plc title="邮箱" field="email"/>
        <Plc title="ip" field="ip"/>
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'评分'} field={'star'}/>
        <Plc title={'地址'} field={'addr'}/>

        <Plc field={'url'} title={'链接'}/>
        <Plc field={'domain'} title={'域名'}/>
        <Plc title="协议" field="protocol"/>
        <Plc title="邮箱" field="email"/>
        <Plc title="ip" field="ip"/>
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'评分'} field={'star'}/>
        <Plc title={'地址'} field={'addr'}/>
      </Table>
    </DemoRow>
  );
});
